<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>RTSP Stream Player</title>
    <link href="https://vjs.zencdn.net/7.20.3/video-js.css" rel="stylesheet" />
    <style>
        .custom-controls {
            margin-top: 10px;
            text-align: center;
        }
        .control-btn {
            padding: 8px 16px;
            margin: 0 5px;
            cursor: pointer;
            background-color: #2196F3;
            color: white;
            border: none;
            border-radius: 4px;
        }
        .control-btn:hover {
            background-color: #1976D2;
        }
        .control-btn.active {
            background-color: #1565C0;
        }
        .control-group {
            margin: 10px 0;
        }
    </style>
</head>
<body>
    <video
        id="my-video"
        class="video-js"
        controls
        preload="auto"
        width="640"
        height="480"
    >
        <source src="/stream/stream.m3u8" type="application/x-mpegURL" />
    </video>

    <div class="custom-controls">
        <div class="control-group">
            <button class="control-btn" onclick="seekVideo(-10)">快退10秒</button>
            <button class="control-btn" onclick="seekVideo(10)">快进10秒</button>
        </div>
        <div class="control-group">
            <button class="control-btn" onclick="setPlaybackRate(0.5)">0.5x</button>
            <button class="control-btn active" onclick="setPlaybackRate(1.0)">1.0x</button>
            <button class="control-btn" onclick="setPlaybackRate(2.0)">2.0x</button>
            <button class="control-btn" onclick="setPlaybackRate(4.0)">4.0x</button>
        </div>
    </div>

    <script src="https://vjs.zencdn.net/7.20.3/video.min.js"></script>
    <script>
        var player = videojs('my-video');
        var currentActiveButton = document.querySelector('.control-btn.active');
        
        function seekVideo(seconds) {
            var currentTime = player.currentTime();
            player.currentTime(currentTime + seconds);
        }
        
        function setPlaybackRate(rate) {
            player.playbackRate(rate);
            
            // 更新按钮激活状态
            if (currentActiveButton) {
                currentActiveButton.classList.remove('active');
            }
            var buttons = document.querySelectorAll('.control-btn');
            buttons.forEach(function(button) {
                if (button.textContent === rate + 'x') {
                    button.classList.add('active');
                    currentActiveButton = button;
                }
            });
        }
    </script>
</body>
</html> 